<template>
  <el-table size="mini" :data="data" class="thhidden" style="width: 100%" stripe border height="300">
    <el-table-column v-for="(col, index) in rowHeader" :min-width="120" :key="index" :prop="col.name" :label="col.name"
                     resizable sortable show-overflow-tooltip>
      <template #default="scope">
        <ex-slot v-if="col.render" :render="col.render" :row="scope.row" :index="scope.$index" :column="col"></ex-slot>
        <span v-else>
                  {{ scope.row[col.name] }}
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
// 自定义内容的组件
const exSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },

  render: (h, data) => {
    const params = {
      row: data.props.row,
      index: data.props.index
    }

    if (data.props.column) params.column = data.props.column
    return data.props.render(h, params)
  }
};

export default {
  components: {
    'ex-slot': exSlot
  },
  props: {
    // 表格数据
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 表头数据
    rowHeader: {
      type: Array,
      default: () => {
        return []
      }
    }
  }
}
</script>

<style scoped>
.thhidden >>> th > .cell {
  white-space: nowrap !important;
}
</style>
